For a more detailed walkthrough of creating a simple diagramming application, see the QuickStart walkthrough.
 

The Mindscape.WpfDiagramming namespace contains all the classes you need to create diagrams using absolute-positioned shapes. In this section we will build a simple shape diagramming application using the built-in shapes.

Step 1. Decide how you want shapes to look.

WPF Diagrams defines a default style for shapes, but you can override this to suit your application theme. The target type for the style must be Path.

CopyExample shape style
<Style x:Key="ShapeNodePathStyle" TargetType="Path">
  <Setter Property="Stroke" Value="Navy" />
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Fill" Value="LightSteelBlue" />
  <Setter Property="Stretch" Value="Fill" />
</Style>

Step 2. Decide how you want connections to look.

WPF Diagrams defines a default style for shapes, but you can override this to suit your application theme. The target type for the style must be Path, and the key must be DiagramShapes.DefaultDiagramConnectionStyleKey.

CopySetting a path style for all connections
<Style x:Key="{x:Static ms:DiagramLineTypes.DefaultDiagramConnectionStyleKey}" TargetType="Path">
  <Setter Property="Stroke" Value="Goldenrod" />
  <Setter Property="StrokeThickness" Value="2" />
</Style>

Step 3. Create a DiagramSurface and hook it up to your styles.

The DiagramSurface control is where the diagram will be displayed. The connection style is hooked up automatically but you need to tell the DiagramSurface about the shape style. The easiest way to do this is via the ShapeTool.ShapePathStyle attached property.

CopyInstantiating a DiagramSurface
<ms:DiagramSurface ms:ShapeTool.ShapePathStyle="{StaticResource ShapeNodePathStyle}" />

The ShapeTool.ShapePathStyle attached property is used only when using the ‘shorthand’ shape toolbox syntax below. For other kinds of node, or when you need finer control of the nodes or the toolbox, you’ll use a DiagramFormatter.
 

Step 4. Create a DiagramToolBox.

Now you have a blank DiagramSurface, you need a way for users to add elements to the diagram. You can do this using the DiagramToolBox control. You must specify a style for drawing the shapes in the toolbox: typically this is the same as the node style but you can make it different if you are using a different color scheme in the toolbox.

The toolbox is divided into groups. Each group has a string header, and contains DiagramNodeTool and/or DiagramConnectionTool objects. To lay out the DiagramNodeTool and DiagramConnectionTool objects, provide styles which specify the Margin, Width and Height of each tool.

You need to create a DiagramNodeTool for each shape you want users to be able to drag from the toolbox. Use the ShapeTool.Shape attached property to specify which shape the tool represents.

Similarly, you need to create a DiagramConnectionTool for each type of line you want users to be able to draw. Use the ConnectionTool.LineType attached property to specify which line type the tool represents.

CopyInstantiating a DiagramToolBox
<ms:DiagramToolBox ms:ShapeTool.ShapePathStyle="{StaticResource ShapeNodePathStyle}">
  <ms:DiagramToolBox.Resources>
    <Style TargetType="ms:DiagramNodeTool">
      <Setter Property="Margin" Value="10" />
      <Setter Property="Width" Value="40" />
      <Setter Property="Height" Value="30" />
    </Style>
    <Style TargetType="ms:DiagramConnectionTool">
      <Setter Property="Margin" Value="10" />
      <Setter Property="Width" Value="40" />
      <Setter Property="Height" Value="30" />
    </Style>
  </ms:DiagramToolBox.Resources>
  <ms:DiagramToolBoxGroup Header="Lines">
    <ms:DiagramConnectionTool ms:ConnectionTool.LineType="Straight" />
    <ms:DiagramConnectionTool ms:ConnectionTool.LineType="Elbow" />
  </ms:DiagramToolBoxGroup>
  <ms:DiagramToolBoxGroup Header="Rectangles">
    <ms:DiagramNodeTool ms:ShapeTool.Shape="Rectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="RoundedRectangle" />
  </ms:DiagramToolBoxGroup>
  <ms:DiagramToolBoxGroup Header="Basic Shapes">
    <ms:DiagramNodeTool ms:ShapeTool.Shape="Ellipse" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="Parallelogram" />
  </ms:DiagramToolBoxGroup>
</ms:DiagramToolBox>

For shapes defined in the DiagramShapes class, and line types defined in the DiagramLineTypes class, you can just type the name of the shape or line type. For user-defined shapes or line types, you will need to use the Static markup extension to refer to the shape object itself.